<template>
    <div>
        list组件
        <input type="text" v-model='name'>

        <button @click='fn(1)'>h1</button>
        <button @click='fn(2)'>h2</button>
        <keep-alive>
          <component :is="id"></component>
        </keep-alive>
    </div>
</template>
<script>
// @ is an alias to /src
import myh1 from './list/h1'
import myh2 from './list/h2'
export default {
    name: 'List',
    data() {
        return {
          name:'珠峰',
          id:myh1
        }
    },
    methods: {
      fn(n){
        this.id = n == 1 ? myh1 : myh2
      }
    },
    created() {
      console.log('list  created')
    },
    destroyed() {
      console.log('list destroy')
    },
    activated() {
      console.log('list组件显示了')
    },
    deactivated() {
      console.log('list组件隐藏了')
    },
    components: {
        
    }
}
</script>
<style lang="less">

</style>